import React, { useEffect, useState } from 'react';

import { Input, message, Modal, Transfer } from 'antd';

interface IProps {
  visible: boolean;
  onCancel: () => void;
  onSure: (groupName:string,widgets:string[]) => void;
  widgets: { widgetId: number, widgetName: string }[];
}

const GroupAddModel: React.FC<IProps> = (props) => {
  const { visible, onCancel, onSure, widgets } = props;
  const [selectWidgets, setSelectWidgets] = useState<string[]>([]); // 选择的指标
  const [groupName, setGroupName] = useState<string>(); // 分组名称
  const [transferDatas, setTransferDatas] = useState<{ key: string; title: string }[]>([]);
  useEffect(() => {
    setTransferDatas(widgets.map(v => ({
      key: String(v.widgetId),
      title: v.widgetName,
    })));
  }, [widgets]);
  useEffect(() => {
    setSelectWidgets([])
    setGroupName('')
  }, [visible]);
  // 选择指标
  const handleChange = (nextTargetKeys: Array<string>) => {
    setSelectWidgets(nextTargetKeys);
  };

  // 创建分组
  const establish = () => {
    if (!groupName) {
      message.warning('请输入分组名称');
      return;
    }
    onSure(groupName,selectWidgets)
  };

  return (
    <Modal
      title='创建指标分组'
      okText='添加'
      destroyOnClose
      width={480}
      visible={visible}
      onOk={establish}
      onCancel={() => {
        onCancel();
      }}
    >
      <h4>分组名称</h4>
      <Input onChange={(e) => setGroupName(e.target.value)} value={groupName} />
      <h4 style={{ marginTop: '30px' }}>选择指标</h4>
      <Transfer
        listStyle={{
          width: 188,
          height: 246,
        }}
        dataSource={transferDatas}
        titles={['看板指标', '分组指标']}
        targetKeys={selectWidgets}
        onChange={handleChange}
        render={(item:any) => item.title}
      />
    </Modal>
  );
};

export default GroupAddModel;
